<template>
  <div class="flex flex-col">
    <!-- 优惠 -->
    <a-card class="flex-1 mt-2" :body-style="{ height: '100%', display: 'flex', 'flex-direction': 'column' }">
      <BaseTitle title="优惠" />
      <a-tabs v-model:activeKey="activeDiscount" class="flex-1">
        <a-tab-pane :key="0" tab="抵用券">
          <div v-if="voucherList.length > 0" class="flex h-full w-full flex-wrap overflow-auto">
            <a-card
              v-for="(item, index) in voucherList"
              :key="index"
              class="mt-2 h-28 border-2 mr-3 item-card relative"
              :class="{ 'cursor-not-allowed': item.status === 1, 'cursor-pointer': item.status !== 1 }"
              @click="onClickVoucher(item)"
            >
              <CheckCircleFilled v-if="item.id === voucherActive" class="text-white voucher-icon" />
              <div
                class="voucher-item flex items-center"
                :class="{
                  'due-background-color due-color': item.status === 1,
                  'active-background-color active-color': item.id === voucherActive,
                  'not-background-color not-color': item.id !== voucherActive
                }"
              >
                <div class="ml-3">
                  <span>￥</span>
                  <span style="font-size: 25px" class="font-bold">{{ item.price }}</span>
                  <div class="pl-2" style="font-size: 12px">抵用券</div>
                </div>
                <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px', color: '#d2a96f' }" />
                <div>
                  <div>{{ item.title }}</div>
                  <div v-if="item.status === 1">有效期已过</div>
                  <div v-else>有效期至{{ item.yxrq }}</div>
                </div>
              </div>
              <div class="pl-3 mt-1" :class="{ 'due-color': item.status === 1 }">使用条件：{{ item.sytj }}</div>
            </a-card>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="1" tab="会员卡">
          <a-empty description="暂未开通" />
        </a-tab-pane>
        <a-tab-pane :key="2" tab="直接优惠">
          <a-empty description="暂未开通" />
        </a-tab-pane>
      </a-tabs>
      <div class="flex items-center justify-end mt-2">
        <span>优惠：</span>
        <span class="font-bold text-red-500 inline-block truncate">￥{{ discountAmount ? formatAmount(discountAmount) : '0.00' }}</span>
      </div>
    </a-card>
    <a-card class="mt-2">
      <BaseTitle title="分币误差" class="!mb-0">
        <span>
          分币<span class="text-red-500 font-bold pl-2">￥{{ formatAmount(amountPrice.differenceAmount) }}</span>
        </span>
      </BaseTitle>
    </a-card>
    <div class="h-24 text-right mr-4">
      <div class="my-2">
        本次实收<span class="text-3xl text-red-500 font-bold">￥{{ formatAmount(amountPrice.categoryPrice) }}</span>
      </div>
      <a-button class="ml-2 w-28" size="large">重置</a-button>
      <a-button type="primary" class="ml-2 w-28" size="large" :disabled="!medicalPrice" @click="onClickCharge">收费</a-button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { CheckCircleFilled } from '@ant-design/icons-vue'
// import { message } from 'ant-design-vue'
import { formatAmount } from '@/utils/format.js'
import { post } from '@/utils/request'

const emit = defineEmits(['success'])
const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  },
  medicalPrice: {
    type: [Number, String],
    default: () => 0
  },
  jzbh: {
    type: String,
    default: () => ''
  }
})
const activeDiscount = ref(0)
const voucherList = ref([
  {
    id: 1,
    price: 50,
    title: '客户专用劵，部分商品50元劵',
    yxrq: '2025-09-09',
    sytj: '指定部分商品，可以使用',
    status: 0
  },
  {
    id: 2,
    price: 50,
    title: '客户专用劵，部分商品50元劵',
    yxrq: '2025-09-09',
    sytj: '指定部分商品，可以使用',
    status: 0
  },
  {
    id: 3,
    price: 100,
    title: '客户专用劵，部分商品50元劵',
    yxrq: '2025-09-09',
    sytj: '指定部分商品，可以使用',
    status: 1
  },
  {
    id: 4,
    price: 50,
    title: '客户专用劵，部分商品50元劵',
    yxrq: '2025-09-09',
    sytj: '指定部分商品，可以使用',
    status: 0
  },
  {
    id: 5,
    price: 50,
    title: '客户专用劵，部分商品50元劵',
    yxrq: '2025-09-09',
    sytj: '指定部分商品，可以使用',
    status: 0
  }
])
const voucherActive = ref(1)
const discountAmount = ref(0)
const amountPrice = ref({
  differenceAmount: 0,
  categoryPrice: 0
})

const getReceiptsAmount = async () => {
  const { code, data } = await post('/outp/oupCharge/getPennyDiscount', {
    ysje: props.medicalPrice, //应收金额
    yhje: Number(discountAmount.value) //优惠金额
  })
  if (code !== 0) return
  amountPrice.value.differenceAmount = data.fbwc
  amountPrice.value.categoryPrice = data.ssje
}

const onClickCharge = () => {
  emit('success', amountPrice.value)
}

const onClickVoucher = (row) => {
  if (row.status !== 1) {
    voucherActive.value = row.id
  }
}

watch(
  () => props.medicalPrice,
  () => {
    getReceiptsAmount()
  }
)

// onMounted(() => {
//   getReceiptsAmount()
// })
</script>
<style lang="less" scoped>
.item-card {
  width: 48%;
  :deep(.ant-card-body) {
    padding: 0;
  }
  .voucher-icon {
    position: absolute;
    top: 5px;
    right: 6px;
    font-size: 16px;
  }
  .voucher-item {
    height: 78px;
    border: 1px solid #d2a96f;
    border-radius: 3px;
  }
}

.active-color {
  color: #fff;
}
.not-color {
  color: #d2a96f;
}
.active-background-color {
  background-color: #d2a96f;
}
.not-background-color {
  background-color: #fcf2e3;
}
.due-background-color {
  background-color: transparent !important;
  border: 1px solid #b7b7b7 !important;
}
.due-color {
  color: #b7b7b7 !important;
}
</style>
